<template>
  <div class="show-container">
    <div class="show-header">
      <a @click="back">
        <Icon type="md-arrow-back" size="22" color="#1e9fff" />
      </a>
      <h4 class="title">{{ title }}</h4>
    </div>
    <div class="content">
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  name: "BackHeader",
  props: {
    title: {
      type: String,
      default: "标题"
    },
    backUrl: {
      type: String,
      default: ""
    }
  },

  methods: {
    back() {
      // this.$router.go(-1)
      this.$closePage(this.$route.path);
    }
  }
};
</script>
<style lang="scss" scoped>
.show-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  .show-header {
    display: flex;
    align-items: center;
    padding-left: 20px;
    height: 50px;
    background-color: #fff;

    .title {
      margin-left: 24px;
    }
  }
  .content {
    padding: 10px;
  }
}
</style>
